<!--
 * @Author: LiuYan
 * @Date: 2022-12-17 13:38:50
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-12 10:13:06
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <title>Document</title>
    <style>
      .body {
        padding: 0 !important;
        overflow: hidden;
      }

      .body .table-body {
        height: 352px !important;
        overflow-y: auto;
      }

      .body .pageTotal {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .body .pageTotal .pageTotal_text {
        font-size: 14px;
        color: #1d2129;
      }

      .body .pageTotal .pageTotal_text span {
        color: #f53f3f;
      }
      .td {
        flex-shrink: 0;
      }
      .table {
        /* overflow-x: auto; */
      }
    </style>
  </head>

  <body>
    <div class="ghcj2" id="app">
      <div class="body">
        <div class="tab-group">
          <div class="tab_button">
            <button
              :class="statusActive == index ? 'button_primary' : 'button_primary_plain'"
              v-for="(item,index) in statusList"
              :key="index"
              @click="statusChange(item,index)"
            >
              {{item.name}}
            </button>
            <!-- <button class="button_primary_plain">待确认</button> -->
          </div>
          <div class="input-btn">
            <div class="input-group">
              <input
                style="width: 16vw"
                placeholder="请输入姓名/联系方式/关键词"
              />
              <label> <img src="./common/img/ghcj2/sosou.png" /> </label>
            </div>
            <div class="select-group">
              <label></label>
              <div class="options">
                <input placeholder="严重程度" style="width: 7vw" />
                <ul>
                  <li>严重程度</li>
                  <li>严重程度</li>
                  <li>严重程度</li>
                  <li>严重程度</li>
                </ul>
              </div>
            </div>
            &ensp;
            <div class="select-group">
              <label></label>
              <div class="options">
                <input placeholder="优先级" style="width: 7vw" />
                <ul>
                  <li>优先级</li>
                  <li>优先级</li>
                </ul>
              </div>
            </div>
            &ensp;&ensp;
            <button class="button_warning">
              <img src="./common/img/ghcj2/bianji.png" />提交变更
            </button>
          </div>
        </div>
        <div class="table">
          <div class="table-header">
            <div class="tr" id="trHeader">
              <div class="td center" style="width: 100%">BUG名称</div>
              <div class="td center" style="width: 10%">严重程度</div>
              <div class="td center" style="width: 10%">优先级</div>
              <div class="td center" style="width: 10%">状态</div>
              <div class="td center" style="width: 10%">创建者</div>
              <div class="td center" style="width: 10%">创建时间</div>
              <div class="td center" style="width: 10%">指派给</div>
              <div class="td center" style="width: 15%">操作</div>
            </div>
          </div>
          <div class="table-body" @scroll="onScroll">
            <div class="tr" v-for="item in list">
              <div class="td center" style="width: 100%">{{item.value}}</div>
              <div class="td center" style="width: 10%">
                <span class="hidden">
                  {{item.value}}sdfsdfsdfsdfsdfssdfsddsfsdfsdfsdfsdafsaafasf
                </span>
              </div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 10%">{{item.value}}</div>
              <div class="td center" style="width: 15%">
                <button class="button_success_text" @click="handle(item)">
                  确认
                </button>
                <!-- <button class="button_info_text" @click="handle(item)">
                确认
              </button> -->
                &ensp;
                <button class="button_primary_text" @click="handle(item)">
                  解决
                </button>
                <!-- <button class="button_info_text" @click="handle(item)">
                解决
              </button> -->
                &ensp;
                <button class="button_warning_text" @click="handle(item)">
                  关闭
                </button>
                &ensp;
                <button class="button_primary_text" @click="handle(item)">
                  编辑
                </button>
                &ensp;
                <button class="button_error_text">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="pageTotal">
          <div class="pageTotal_text">
            本页共<span>5个BUG</span>，未解决<span>4个</span>
          </div>
          <div class="pagination">
            <span>共 {{total}} 条</span>
            <ul>
              <li @click="shang"><i class="bi bi-chevron-left"></i></li>
              <li
                v-show="start > 0"
                @click="()=>{
                  if(start > 0){
                    params.page = start;
                    end-=3
                    start-=3
                  }
                }"
              >
                ...
              </li>
              <li
                @click="onCurrentPage(item)"
                v-for="item in totalPage"
                v-show="item < end && item > start"
                :class="[item == params.page ? 'active' :'']"
              >
                {{item}}
              </li>
              <li
                v-show="end <= totalPage"
                @click="()=>{
                  if(end <= totalPage){
                  params.page = end;
                  end+=3
                  start+=3
                  }
                }"
              >
                ...
              </li>
              <li @click="next"><i class="bi bi-chevron-right"></i></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          total: 0,
          totalPage: 0,
          start: 0,
          end: 4,
          list: [],
          params: {
            page: 1,
            limit: 10,
          },
          statusList: [
            { name: "所有", value: -1 },
            { name: "待确认", value: 1 },
            { name: "处理中", value: 1 },
            { name: "已解决", value: 1 },
            { name: "由我创建", value: 1 },
            { name: "由我解决", value: 1 },
            { name: "已关闭", value: 1 },
          ],
          statusActive: 0,
        };
      },
      //页面初始化加载
      mounted() {
        console.log("页面初始化加载");
        this.get();
      },
      //所有函数都写在这里
      methods: {
        onScroll(e) {
          document.querySelector("#trHeader").scrollLeft = e.target.scrollLeft;
        },
        // 列表状态切换
        statusChange(item, index) {
          this.statusActive = index;
        },
        shang() {
          if (this.params.page > 1) this.params.page--;
          if (this.params.page < this.start + 1) {
            this.end -= 3;
            this.start -= 3;
          }
          this.get();
        },
        next() {
          if (this.params.page < this.totalPage) this.params.page++;
          if (this.params.page > this.end - 1) {
            this.end += 3;
            this.start += 3;
          }
          this.get();
        },
        onCurrentPage(page) {
          this.params.page = page;
        },
        //接口
        get() {
          // ajax 请求
          // $.ajax()
          this.totalPage = 10; // 总页数
          this.total = 100; //总条数
          this.list = [
            {
              value: "吴恒",
            },
            {
              value: "吴恒",
            },
          ];
        },
      },
    }).mount("#app");
  </script>
</html>
